<template>
  <view class="inbound-detail-container">
    <!-- 入库单基本信息 -->
    <view class="info-card">
      <view class="card-header">
        <text class="inbound-name">项目：{{ getProjectName(inbound.projectId) }}</text>
        <uni-tag :text="inbound.orderWholeStatus === '0' ? '未完成' : '已完成'" :type="getTagType(inbound.orderWholeStatus)"
          size="small" />
      </view>
      <view class="info-section">
        <view class="section-title">基本信息</view>
        <view class="info-row">
          <text class="label">负责人：</text>
          <text class="value">{{ inbound.responsiblePerson }}</text>
        </view>
        <view class="info-row">
          <text class="label">开始时间：</text>
          <text class="value">{{ inbound.createTime }}</text>
        </view>
        <view class="info-row">
          <text class="label">供应商：</text>
          <text class="value">{{ inbound.companyName }}</text>
        </view>
        <view class="info-row">
          <text class="label">电话：</text>
          <text class="value">{{ inbound.companyPhone }}</text>
        </view>
      </view>

      <!-- 添加票据图片回显 -->
      <view class="info-section" v-if="pjimage && pjimage.length > 0">
        <view class="section-title">票据图片</view>
        <view class="image-gallery">
          <view class="image-item" v-for="(image, index) in pjimage" :key="index" @click="previewImage(image, pjimage)">
            <image :src="image" mode="aspectFill"></image>
          </view>
        </view>
      </view>

      <view class="info-section">
        <view class="section-title">备注说明</view>
        <view class="description">
          {{ inbound.remark || '没有工单描述' }}
        </view>
      </view>
    </view>

    <!-- 入库进度 -->
    <view class="progress-card">
      <view class="section-title">入库进度</view>
      <view class="progress-bar">
        <progress :percent="inbound.progress" stroke-width="8" activeColor="#007aff" />
        <text class="progress-text">{{ inbound.orderStatus == 9 ? 7 : inbound.orderStatus }}/7</text>
      </view>
    </view>

    <!-- 入库步骤 -->
    <view class="steps-card">
      <view class="section-title">入库步骤</view>
      <view class="steps-timeline">
        <!-- 步骤1 -->
        <view v-if="currentStep === 1" class="step-item">
          <view class="step-dot"></view>
          <view class="step-content">
            <view class="step-header">
              <text class="step-title">步骤1：取车</text>
            </view>
            <view class="step-info">
              <!-- 原有内容保持不变 -->
              <view class="step-description">请选择取车方式并确认车辆已准备就绪</view>
              <uni-data-select v-model="inbound.transportType" :localdata="transport_type" placeholder="请选择取车方式"
                class="vehicle-type-select" />
              <uni-data-select v-if="inbound.transportType === '1'" v-model="inbound.factLicensePlate"
                :localdata="car_list" placeholder="请选择公司车辆" class="vehicle-select" />
              <button type="primary" class="confirm-btn" @click="confirmStep"
                :disabled="!inbound.transportType || (inbound.transportType === '1' && !inbound.factLicensePlate)">确认完成</button>
            </view>
          </view>
        </view>

        <!-- 步骤2 -->
        <view v-if="currentStep === 2" class="step-item">
          <view class="step-dot"></view>
          <view class="step-content">
            <view class="step-header">
              <text class="step-title">步骤2：出发</text>
            </view>
            <view class="step-info">
              <!-- 原有内容保持不变 -->
              <view class="step-description">确认车辆已出发前往供应商处</view>
              <button type="primary" class="confirm-btn" @click="confirmStep">确认完成</button>
            </view>
          </view>
        </view>

        <!-- 其他步骤类似添加，这里只展示步骤3作为示例 -->
        <view v-if="currentStep === 3" class="step-item">
          <view class="step-dot"></view>
          <view class="step-content">
            <view class="step-header">
              <text class="step-title">步骤3：车辆到达</text>
            </view>
            <view class="step-info">
              <!-- 原有内容保持不变 -->
              <view class="step-description">确认车辆已到达供应商处</view>
              <button type="primary" class="confirm-btn" @click="confirmStep">确认完成</button>
            </view>
          </view>
        </view>

        <!-- 其他步骤也需要类似添加图片上传组件 -->
        <!-- 其他步骤也需要类似添加图片上传组件 -->
        <view v-if="currentStep === 4" class="step-item">
          <view class="step-dot"></view>
          <view class="step-content">
            <view class="step-header">
              <text class="step-title">步骤4：核验货物</text>
            </view>
            <!-- 添加图片上传组件 -->
            <view class="step-images">
              <view class="image-upload-title">上传货物图片(最多5张)</view>
              <view class="image-upload-container">
                <view class="image-preview" v-for="(image, index) in stepImages[4] || []" :key="index">
                  <image :src="image" mode="aspectFill" @click="previewImage(image, stepImages[4])"></image>
                  <view class="delete-icon" @click.stop="deleteImage(4, index)">×</view>
                </view>
                <view class="upload-button" @click="chooseImage(4)" v-if="(stepImages[4] || []).length < 5">
                  <uni-icons type="camera" size="30" color="#999"></uni-icons>
                </view>
              </view>
            </view>

            <!-- 添加票据照片上传组件（必填） -->
            <view class="step-images">
              <view class="image-upload-title">上传票据照片(必填)</view>
              <view class="image-upload-container">
                <view class="image-preview" v-for="(image, index) in imageOrder || []" :key="index">
                  <image :src="image" mode="aspectFill" @click="previewImage(image, imageOrder)"></image>
                  <view class="delete-icon" @click.stop="deleteOrderImage(index)">×</view>
                </view>
                <view class="upload-button" @click="chooseOrderImage()" v-if="(imageOrder || []).length < 3">
                  <uni-icons type="camera" size="30" color="#999"></uni-icons>
                </view>
              </view>
              <view class="required-tip" v-if="!imageOrder || imageOrder.length === 0">
                <text class="required-text">* 票据照片为必填项</text>
              </view>
            </view>

            <view class="step-info">
              <view class="step-description">请核验货物数量是否与订单一致</view>
              <view class="goods-verify-list">
                <view class="goods-item" v-for="(goods, index) in inbound.storeOrderCargoList" :key="goods.cargoId">
                  <view class="goods-info">
                    <text class="goods-name">{{ goods.cargoName }}</text>
                  </view>
                  <view class="goods-verify">
                    <text class="verify-label">实际数量：</text>
                    <input type="number" v-model="goods.cargoInputNum" class="verify-input" placeholder="请输入实际数量" />
                  </view>
                </view>
              </view>
              <button type="primary" class="confirm-btn" @click="verifyAllGoods">确认核验</button>
            </view>
          </view>
        </view>

        <!-- 步骤5 -->
        <view v-if="currentStep === 5" class="step-item">
          <view class="step-dot"></view>
          <view class="step-content">
            <view class="step-header">
              <text class="step-title">步骤5：返程</text>
            </view>
            <view class="step-info">
              <view class="step-description">确认车辆已装载货物并开始返程</view>
              <button type="primary" class="confirm-btn" @click="confirmStep">申请返程</button>
            </view>
          </view>
        </view>

        <!-- 步骤5 -->
        <view v-if="currentStep === 6" class="step-item">
          <view class="step-dot"></view>
          <view class="step-content">
            <view class="step-header">
              <text class="step-title">步骤6：确认返程</text>
            </view>
            <view class="step-info">
              <view class="step-description">司机申请返程确认</view>
              <button type="primary" class="confirm-btn" @click="confirmStep"
                :disabled="!(user_permissions === 'manager' || user_permissions === 'admin')">确认返程</button>
            </view>
          </view>
        </view>

        <!-- 步骤9 -->
        <view v-if="currentStep === 7" class="step-item">
          <view class="step-dot"></view>
          <view class="step-content">
            <view class="step-header">
              <text class="step-title">步骤9：完成</text>
            </view>
            <view class="step-images">
              <view class="image-upload-title">上传车辆图片(最多5张)</view>
              <view class="image-upload-container">
                <view class="image-preview" v-for="(image, index) in stepImages[7] || []" :key="index">
                  <image :src="image" mode="aspectFill" @click="previewImage(image, stepImages[7])"></image>
                  <view class="delete-icon" @click.stop="deleteImage(7, index)">×</view>
                </view>
                <view class="upload-button" @click="chooseImage(7)" v-if="(stepImages[7] || []).length < 5">
                  <uni-icons type="camera" size="30" color="#999"></uni-icons>
                </view>
              </view>
            </view>
            <view class="step-info">
              <view class="step-description">确认入库流程全部完成</view>
              <view v-if="isCompanyVehicle" class="mileage-input-container">
                <text class="mileage-label">当前公里数：</text>
                <input type="number" v-model="inbound.returnCarDistance" class="mileage-input" placeholder="请输入行驶公里数"
                  required />
                <text class="mileage-unit">公里</text>
              </view>
              <view v-if="isCompanyVehicle" class="error-message">
                <text>还车公里数必须大于取车公里数({{ inbound.takeCarDistance }}公里)</text>
              </view>
              <button type="primary" class="confirm-btn" @click="confirmStep"
                :disabled="isCompanyVehicle && !inbound.returnCarDistance">确认完成</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getOrderDetailByType, updateStatusOrder, getRole } from "@/api/mes/order"
import { getProjectAll } from "@/api/mes/project"
import { listCar } from "@/api/mes/car"
import { getToken } from '@/utils/auth'
import config from '@/config'
import { getDicts } from "@/api/system/dict/data" // 引入字典API

const baseUrl = config.baseUrl

export default {
  data() {
    return {
      id: '',
      orderType: '',
      currentStep: 1, // 当前步骤
      selectedVehicleType: '',
      selectedCompanyVehicle: '',
      transport_type: [
      ],
      user_permissions: '',
      car_list: [],
      inbound: {},
      project_list: [],
      // 添加图片存储对象，键为步骤编号，值为图片数组
      imageOrder: [], // 存储票据照片
      tempimageOrder: [], // 临时存储票据照片路径
      stepImages: {},
      // 添加图片临时路径存储
      tempImageFiles: {},
      pjimage: [],
    }
  },
  computed: {
    isCurrentStepCompleted() {
      return this.currentStep > this.inbound.orderStatus;
    },
    isCompanyVehicle() {
      return this.inbound.transportType === 1;
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.orderType = options.orderType;
      this.handleDetail(this.id, this.orderType);
    };
    this.getProjectList();
    this.getCarList();
    this.getDictData();
    this.getPostName();
  },
  methods: {
    // 获取岗位 
    getPostName() {
      getRole().then(response => {
        console.log("获取岗位", response.msg);
        this.user_permissions = response.msg
      });
    },
    getCarList() {
      listCar().then(response => {
        this.car_list = response.data.map(car => ({
          value: car.carId.toString(),
          text: car.carNo
        }));
      });
    },
    getDictData() {
      getDicts('transport_type').then(response => {
        this.transport_type = response.data.map(item => ({
          value: item.dictValue,
          text: item.dictLabel
        }));
      });
    },
    getTagType(status) {
      const typeMap = {
        '0': 'primary',
        '1': 'success',
      }
      return typeMap[status] || 'default'
    },
    getProjectList() {
      getProjectAll().then(response => {
        this.project_list = response.rows.map(project => ({
          value: project.projectId,
          text: project.projectName,
        }));
      });
    },
    getProjectName(projectId) {
      if (!projectId) return '-';
      const project = this.project_list.find(item => item.value === projectId);
      return project ? project.text : projectId;
    },
    handleDetail(id, orderType) {
      getOrderDetailByType({ orderId: id, orderType: orderType }).then(response => {
        // console.log("获取入库单详情", response.data);
        if (response.data) {
          this.inbound = response.data;
          // this.inbound.transportType = null;
          this.inbound.orderStatus = response.data.orderStatus; // 确保 orderStatus 有默认值
          this.currentStep = parseInt(this.inbound.orderStatus) + 1;
          this.pjimage = response.data.imageOrder ? response.data.imageOrder.split(',') : [];

          // 处理从后端获取的图片数据
          if (response.data.stepImages) {
            this.processStepImages(response.data.stepImages);
          }

          this.calculateProgress(); // 确保在数据更新后计算进度
        } else {
          console.error('响应数据为空');
        }
      }).catch(error => {
        console.error('获取入库单详情失败:', error);
      });
    },
    // 添加处理图片数据的方法
    processStepImages(stepImages) {
      // 检查 stepImages 是否存在
      if (!stepImages) {
        console.error('stepImages 为空');
        return;
      }

      // 清空当前的图片数据
      this.stepImages = {};
      this.tempImageFiles = {};

      // 处理每个步骤的图片
      for (const key in stepImages) {
        if (key.startsWith('step') && key.endsWith('Images')) {
          // 提取步骤编号
          const stepNumber = key.replace('step', '').replace('Images', '');

          // 初始化数组
          this.$set(this.stepImages, stepNumber, []);
          this.$set(this.tempImageFiles, stepNumber, []);

          // 确保 stepImages[key] 是数组且不为空
          if (Array.isArray(stepImages[key]) && stepImages[key].length > 0) {
            // 添加图片
            stepImages[key].forEach(imageUrl => {
              if (imageUrl) { // 确保 imageUrl 不为空
                this.stepImages[stepNumber].push(imageUrl);
                this.tempImageFiles[stepNumber].push(imageUrl);
              }
            });
          }
        }
      }
    },
    calculateProgress() {
      if (this.inbound.orderStatus !== undefined) {
        this.inbound.progress = Math.floor((parseInt(this.inbound.orderStatus) / 8) * 100);
      } else {
        console.error('orderStatus 未定义');
      }
    },
    chooseImage(stepNumber) {
      uni.chooseImage({
        count: 5 - (this.stepImages[stepNumber] || []).length, // 最多可选择的图片数量
        sizeType: ['compressed'], // 压缩图片
        sourceType: ['album', 'camera'], // 从相册或相机选择
        success: (res) => {
          // 初始化当前步骤的图片数组（如果不存在）
          if (!this.stepImages[stepNumber]) {
            this.$set(this.stepImages, stepNumber, []);
          }

          // 初始化临时文件存储（如果不存在）
          if (!this.tempImageFiles[stepNumber]) {
            this.$set(this.tempImageFiles, stepNumber, []);
          }

          // 获取选择的图片临时路径
          const newTempFiles = res.tempFilePaths;

          // 显示上传中提示
          uni.showLoading({
            title: '上传中...'
          });

          // 使用Promise.all处理多文件上传
          const uploadPromises = newTempFiles.map(filePath => {
            return new Promise((resolve, reject) => {
              uni.uploadFile({
                url: baseUrl + '/common/upload', // 使用baseUrl
                filePath: filePath,
                name: 'file',
                header: {
                  'authorization': "Bearer " + getToken('token') || ''
                },
                success: (uploadRes) => {
                  try {
                    // 解析返回的JSON数据
                    const data = JSON.parse(uploadRes.data);
                    if (data.code === 200) {
                      // 返回服务器上的文件路径
                      resolve(data.url || data.fileName || data.data);
                    } else {
                      reject(new Error(data.msg || '上传失败'));
                    }
                  } catch (e) {
                    reject(new Error('解析上传结果失败: ' + e.message));
                  }
                },
                fail: (err) => {
                  console.error('上传失败:', err);
                }
              });
            });
          });

          // 处理所有上传结果
          Promise.all(uploadPromises)
            .then(uploadedUrls => {
              // 隐藏加载提示
              uni.hideLoading();

              // 将上传成功的图片URL添加到数组中
              uploadedUrls.forEach(url => {
                if (url) {
                  this.tempImageFiles[stepNumber].push(url);
                  this.stepImages[stepNumber].push(url);
                }
              });
              // 更新inbound对象中的图片数据
              this.updateInboundImages();

              uni.showToast({
                title: '上传成功',
                icon: 'success'
              });
            })
            .catch(err => {
              // 隐藏加载提示
              uni.hideLoading();

              console.error('上传失败:', err);
              uni.showToast({
                title: '上传失败，请重试',
                icon: 'none'
              });
            });
        }
      });
    },
    deleteImage(stepNumber, index) {
      // 从显示数组和临时文件中删除
      this.stepImages[stepNumber].splice(index, 1);
      this.tempImageFiles[stepNumber].splice(index, 1);

      // 更新inbound对象中的图片数据
      this.updateInboundImages();
    },
    previewImage(current, urls) {
      uni.previewImage({
        current: current,
        urls: urls
      });
    },
    updateInboundImages() {
      // 将图片数据转换为后端需要的格式
      const imageData = {};

      for (const step in this.tempImageFiles) {
        // 确保 tempImageFiles[step] 是数组且不为空
        if (this.tempImageFiles[step] && Array.isArray(this.tempImageFiles[step]) && this.tempImageFiles[step].length > 0) {
          // 根据步骤不同，使用不同的键名存储图片
          if (step === '4') {
            imageData.imageCargo = this.tempImageFiles[step];
          } else if (step === '7') {
            imageData.imageCar = this.tempImageFiles[step];
          } else {
            imageData[`step${step}Images`] = this.tempImageFiles[step];
          }
        }
      }

      // 更新inbound对象
      for (const step in this.tempImageFiles) {
        if (step === '4') {
          this.inbound.imageCargo = Array.isArray(imageData.imageCargo) ? imageData.imageCargo.join(',') : '';
        } else if (step === '7') {
          this.inbound.imageCar = Array.isArray(imageData.imageCar) ? imageData.imageCar.join(',') : '';
        }
      }
    },
    async confirmStep() {
      const orderStatus = this.currentStep;

      // 检查是否是当前步骤
      if (orderStatus !== this.currentStep) return;
      // 更新图片数据
      if (orderStatus === 1) {
        // 检查是否选择了出行方式
        // console.log("this.inbound.transportType", this.inbound.transportType); 
        if (!this.inbound.factLicensePlate) {
          uni.showToast({
            title: '请选择出行方式',
            icon: 'none'
          });
          return;
        }
        // 如果选择了公司车辆，检查是否选择了具体车辆
        if (!this.inbound.transportType) {
          uni.showToast({
            title: '请选择出行方式',
            icon: 'none'
          });
          return;
        }
      }
      // 步骤7时进行公里数校验
      if (orderStatus === 7 && this.isCompanyVehicle) {
        this.updateInboundImages();
        // 检查是否输入了公里数
        if (!this.inbound.returnCarDistance) {
          uni.showToast({
            title: '请输入行驶公里数',
            icon: 'none'
          });
          return;
        }

        // 检查还车公里数是否大于取车公里数
        if (parseInt(this.inbound.returnCarDistance) <= parseInt(this.inbound.takeCarDistance)) {
          uni.showToast({
            title: '还车公里数必须大于取车公里数',
            icon: 'none'
          });
          return;
        }
      }

      try {
        // 显示加载提示
        uni.showLoading({
          title: '提交中...'
        });

        // 调用后端接口更新步骤状态
        const response = await updateStatusOrder(this.inbound);
        // 隐藏加载提示
        uni.hideLoading();

        if (response.code === 200) {
          this.currentStep = orderStatus + 1;
          if (orderStatus === 7) {
            this.inbound.status = '已完成';
          }

          // 清除票据照片数组，避免重复上传
          this.imageOrder = [];
          this.tempimageOrder = [];

          // 显示成功提示并返回待办列表
          uni.showToast({
            title: orderStatus === 7 ? '出库流程已完成' : '操作成功',
            icon: 'success',
            duration: 300,
            success: () => {
              // 延迟返回，让用户看到提示
              setTimeout(() => {
                // 使用navigateBack返回上一页
                uni.navigateBack({
                  delta: 1,
                  success: function () {
                    // 获取当前页面栈
                    const pages = getCurrentPages();
                    // 获取上一页实例
                    const prevPage = pages[pages.length - 1];
                    // 调用上一页的刷新方法
                    if (prevPage && prevPage.$vm && typeof prevPage.$vm.getList === 'function') {
                      prevPage.$vm.getList();
                    }
                  }
                });
              }, 100);
            }
          });
        } else {
          uni.showToast({
            title: response.msg || '操作失败',
            icon: 'none'
          });
          console.error('更新步骤状态失败:', response.message);
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        });
        console.error('调用后端接口失败:', error);
      }
    },
    verifyAllGoods() {
      if (!this.imageOrder || this.imageOrder.length === 0) {
        uni.showToast({
          title: '请上传票据照片',
          icon: 'none'
        });
        return;
      }
      // 检查输入数量与实际数量是否一致
      const discrepancies = this.inbound.storeOrderCargoList.filter(goods => {
        // 确保转换为相同类型进行比较
        return parseInt(goods.cargoInputNum) !== parseInt(goods.cargoNum);
      });

      if (discrepancies.length > 0) {
        // 使用uni.showModal提示用户确认不一致的数量
        uni.showModal({
          title: '数量不一致',
          content: '输入的数量与实际数量不一致，是否继续？',
          success: (res) => {
            if (res.confirm) {
              this.inbound.storeOrderCargoList.forEach(goods => {
                if (goods.cargoInputNum) {
                  goods.cargoNum = goods.cargoInputNum;
                }
              });
              // 用户点击确定
              this.proceedToNextStep();
            } else {
              // 用户点击取消
              console.log('用户取消了操作');
            }
          }
        });
      } else {
        this.proceedToNextStep();
      }
    },
    proceedToNextStep() {
      // console.log('提交数据',this.inbound);
      this.inbound.imageOrder = this.imageOrder ? this.imageOrder.join(',') : '';
      // updateStatusOrder可能是异步的，需要使用Promise或回调
      updateStatusOrder(this.inbound).then(response => {
        if (response.code === 200) {
          this.currentStep += 1;
          this.handleDetail(this.id, this.orderType); // 更新数据后重新获取详情
          setTimeout(() => {
            // 使用navigateBack返回上一页
            uni.navigateBack({
              delta: 1,
              success: function () {
                // 获取当前页面栈
                const pages = getCurrentPages();
                // 获取上一页实例
                const prevPage = pages[pages.length - 1];
                // 调用上一页的刷新方法
                if (prevPage && prevPage.$vm && typeof prevPage.$vm.loadTodoList === 'function') {
                  prevPage.$vm.loadTodoList();
                }
              }
            });
          }, 100);
        } else {
          console.error('更新步骤状态失败:', response.message);
        }
      }).catch(error => {
        console.error('调用后端接口失败:', error);
      });
    },
    chooseOrderImage() {
      uni.chooseImage({
        count: 3 - (this.imageOrder || []).length, // 最多可选择的图片数量
        sizeType: ['compressed'], // 压缩图片
        sourceType: ['album', 'camera'], // 从相册或相机选择
        success: (res) => {
          // 初始化票据图片数组（如果不存在）
          if (!this.imageOrder) {
            this.imageOrder = [];
          }

          // 初始化临时文件存储（如果不存在）
          if (!this.tempimageOrder) {
            this.tempimageOrder = [];
          }

          // 获取选择的图片临时路径
          const newTempFiles = res.tempFilePaths;

          // 显示上传中提示
          uni.showLoading({
            title: '上传中...'
          });

          // 使用Promise.all处理多文件上传
          const uploadPromises = newTempFiles.map(filePath => {
            return new Promise((resolve, reject) => {
              uni.uploadFile({
                url: baseUrl + '/common/upload', // 使用baseUrl
                filePath: filePath,
                name: 'file',
                header: {
                  'authorization': "Bearer " + getToken('token') || ''
                },
                success: (uploadRes) => {
                  try {
                    // 解析返回的JSON数据
                    const data = JSON.parse(uploadRes.data);
                    if (data.code === 200) {
                      // 返回服务器上的文件路径
                      resolve(data.url || data.fileName || data.data);
                    } else {
                      reject(new Error(data.msg || '上传失败'));
                    }
                  } catch (e) {
                    reject(new Error('解析上传结果失败: ' + e.message));
                  }
                },
                fail: (err) => {
                  console.error('上传失败:', err);
                  reject(err);
                }
              });
            });
          });

          // 处理所有上传结果
          Promise.all(uploadPromises)
            .then(uploadedUrls => {
              // 隐藏加载提示
              uni.hideLoading();

              // 将上传成功的图片URL添加到数组中
              uploadedUrls.forEach(url => {
                if (url) {
                  this.tempimageOrder.push(url);
                  this.imageOrder.push(url);
                }
              });

              uni.showToast({
                title: '上传成功',
                icon: 'success'
              });
            })
            .catch(err => {
              // 隐藏加载提示
              uni.hideLoading();

              console.error('上传失败:', err);
              uni.showToast({
                title: '上传失败，请重试',
                icon: 'none'
              });
            });
        }
      });
    },

    // 删除票据照片
    deleteOrderImage(index) {
      this.imageOrder.splice(index, 1);
      this.tempimageOrder.splice(index, 1);

      // 更新inbound对象中的图片数据
      this.updateInboundImages();
    },
  }
}
</script>

<style lang="scss" scoped>
.inbound-detail-container {
  padding: 20rpx;
  //   background-color: #f8f8f8;
}

.info-card,
.progress-card,
.steps-card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .inbound-name {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.info-section {
  margin-bottom: 30rpx;

  .info-row {
    display: flex;
    margin-bottom: 16rpx;

    .label {
      color: #666;
      width: 160rpx;
    }

    .value {
      flex: 1;
    }
  }
}

.description {
  color: #666;
  line-height: 1.6;
}

.progress-bar {
  position: relative;
  margin: 20rpx 0;

  .progress-text {
    position: absolute;
    right: 0;
    top: -40rpx;
    color: #007aff;
    font-size: 28rpx;
  }
}

// 步骤时间线样式
.steps-timeline {
  position: relative;
  padding-left: 40rpx;

  &:before {
    content: '';
    position: absolute;
    left: 10rpx;
    top: 0;
    bottom: 0;
    width: 2rpx;
    background-color: #ddd;
  }

  .step-item {
    position: relative;
    padding-bottom: 40rpx;

    .step-dot {
      position: absolute;
      left: -40rpx;
      top: 10rpx;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background-color: #ddd;
      z-index: 1;
    }

    &.step-active .step-dot {
      background-color: #007aff;
    }

    &.step-completed .step-dot {
      background-color: #4cd964;
    }

    .step-content {
      padding: 20rpx;
      background-color: #f8f8f8;
      border-radius: 10rpx;

      .step-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;

        .step-title {
          font-weight: bold;
        }
      }

      .step-info {
        margin-top: 20rpx;

        .step-description {
          color: #666;
          margin-bottom: 20rpx;
        }

        .confirm-btn {
          width: 100%;
        }
      }
    }
  }
}

.vehicle-type-select {
  margin-bottom: 20rpx;
}

.verify-form {
  padding: 20rpx;

  .input-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .verify-input {
    width: 100%;
    height: 70rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
  }
}

.goods-verify-list {
  margin-top: 20rpx;

  .goods-item {
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2rpx);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    }

    .goods-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .goods-name {
        font-size: 32rpx;
        font-weight: bold;
        margin-right: 20rpx;
      }

      .goods-order-quantity {
        font-size: 28rpx;
        color: #666;
        background-color: #f2f6fc;
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
      }
    }

    .goods-verify {
      display: flex;
      align-items: center;
      background-color: #f8f8f8;
      padding: 12rpx;
      border-radius: 6rpx;

      .verify-label {
        font-size: 28rpx;
        margin-right: 20rpx;
      }

      .verify-input {
        flex: 1;
        height: 70rpx;
        padding: 0 20rpx;
        font-size: 32rpx;
        color: #333;
        background-color: #fff;
        border: 2rpx solid #dcdfe6;
        border-radius: 6rpx;

        &:focus {
          border-color: #409eff;
          box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
        }

        &::placeholder {
          color: #999;
          font-size: 28rpx;
        }
      }

      .verify-unit {
        margin-left: 10rpx;
        color: #666;
        font-size: 28rpx;
      }
    }
  }
}

.mileage-input-container {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  border: 1px solid #eee;

  .mileage-label {
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
    white-space: nowrap;
  }

  .mileage-input {
    flex: 1;
    height: 70rpx;
    font-size: 32rpx;
    color: #333;
    padding: 0 20rpx;
    border: none;
    background-color: transparent;
  }

  .mileage-unit {
    font-size: 28rpx;
    color: #666;
    margin-left: 10rpx;
  }
}

.completion-info {
  background-color: #f0f9eb;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-left: 4rpx solid #67c23a;

  .completion-item {
    display: flex;
    margin-bottom: 16rpx;

    .completion-label {
      color: #666;
      width: 160rpx;
    }

    .completion-value {
      flex: 1;
      color: #333;
      font-weight: 500;
    }
  }
}

.completion-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  background-color: #f0f9eb;
  border-radius: 8rpx;

  .success-text {
    color: #4cd964;
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 10rpx;
  }
}

// 添加图片上传相关样式
.step-images {
  margin: 20rpx 0;

  .image-upload-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
  }

  .image-upload-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .image-preview {
      width: 180rpx;
      height: 180rpx;
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .delete-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 40rpx;
        height: 40rpx;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        z-index: 2;
      }
    }

    .upload-button {
      width: 180rpx;
      height: 180rpx;
      border: 1px dashed #ddd;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f8f8f8;
    }

    .image-gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      margin-top: 10rpx;

      .image-item {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
</style>